<script setup>
import { ref } from 'vue';
import { useClassIDStore } from '@/stores/classID.js'
const classIDStore = useClassIDStore();
import { useStudentIDStore } from '@/stores/studentID.js'
const studentIDStore = useStudentIDStore();
import { useStudentNameStore } from '@/stores/studentName.js'
const studentNameStore = useStudentNameStore();
import { studentConversationService } from '@/api/teacherApi/studentConversationInfo.js'
import { studentAllChapterInfoService } from '@/api/teacherApi/studentAllChapterInfo.js'
import { studentAllQuestionService } from '@/api/teacherApi/studentAllQuestionInfo.js'
import { useClassNameStore } from '@/stores/className.js'
import { ElMessage } from 'element-plus'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/lib/common';
const md = new MarkdownIt({
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return '<pre><code class="hljs">' +
                    hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
                    '</code></pre>';
            } catch (__) { }
        }
        return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
    }
});
const classNameStore = useClassNameStore();
const className = ref()
const getClassInfo = () => {
    className.value = classNameStore.className;
    //console.log(className.value)
}
getClassInfo();
const studentName = ref()
const studentID = ref()
const getStudentInfo = () => {
    studentName.value = studentNameStore.studentName;
    studentID.value = studentIDStore.studentID;
    //console.log(studentName.value)
}
getStudentInfo();
const selectData = ref()
const historyData = ref()
const noData = () => {
    ElMessage('学生还未提问')
}
const handleNodeClick = async (data) => {
    //console.log(data)
    if (data.conversationID != null) {
        //console.log(data.conversationID)
        let tmp = await studentAllQuestionService(data.conversationID);
        //console.log(tmp)
        historyData.value = tmp.data.data.map(item => ({
            ...item,
            answerContent: md.render(item.answerContent)
        }));
    }
    else if (data.children.length == 0) {
        console.log(data)
        noData()
    }
}
const allData = []
const allConversationData = ref()
const getAllConversationInfo = async () => {
    let chapterResult = await studentAllChapterInfoService(classIDStore.classID);
    selectData.value = chapterResult.data
    for (let i = 0; i < chapterResult.data.length; i++) {
        let conversation = await studentConversationService(studentIDStore.studentID, classIDStore.classID, chapterResult.data[i].chapterID);
        let chapterData = {
            label: '',
            children: [
            ]
        };
        chapterData.label = chapterResult.data[i].chapterName;
        for (let j = 0; j < conversation.data.length; j++) {
            chapterData.children.push({ label: conversation.data[j].title, conversationID: conversation.data[j].conversationID })
        }
        //console.log(chapterData)
        allData.push(chapterData)
    }
    //console.log(allData)
    allConversationData.value = allData
}
getAllConversationInfo()
import { useTeacherIdentityStore } from '@/stores/teacherIdentity.js'
const teacherIdentityStore = useTeacherIdentityStore();
const returnHome = () => {
    let ti = teacherIdentityStore.teacherIdentity
    if (ti == 't') {
        router.push('/teacherClassCreateMange');
    }
    else {
        router.push('/teacherClassJoinMange');
    }
};
import { useRouter } from 'vue-router';
const router = useRouter()
</script>
<template>
    <!-- 整个聊天面板 -->
    <el-container class="chat-panel">
        <!-- 左侧的会话列表 -->
        <el-aside class="session-panel">
            <div :style="{ height: '100%' }">
                <div :style="{ height: '15%' }">
                    <div class="container">
                        <div>
                            <el-button @click="returnHome()">返回</el-button>
                            <div>课堂：<strong>{{ className }}</strong></div>
                            <div>学生：<strong>{{ studentName }}</strong></div>
                            <div>学号：<strong>{{ studentID }}</strong></div>
                        </div>
                    </div>
                </div>
                <div :style="{ height: '85%' }">
                    <el-scrollbar>
                        <el-tree style="max-width: 600px" :data="allConversationData" @node-click="handleNodeClick" />
                    </el-scrollbar>
                </div>
            </div>
        </el-aside>
        <el-container :style="{ width: '80%' }">
            <el-main :style="{ height: '100vh', width: '100%', border: '2px solid #ccc' }">
                <el-scrollbar>
                    <div v-for="(item, index) in historyData" :key="index">
                        <el-card shadow="always" style="max-width: 70%;margin: 0 auto;margin-bottom: 15px;">
                            <p class="question">{{ item.questionContent }}</p>
                        </el-card>
                        <el-card shadow="always"
                            style=" background-color: #82c1ff;max-width: 70%;margin: 0 auto;margin-bottom: 15px;">
                            <p class="answer">
                                <div v-html="item.answerContent"></div>
                            </p>
                        </el-card>
                    </div>
                </el-scrollbar>
            </el-main>
            <!-- 右侧的消息记录 -->
        </el-container>
    </el-container>
</template>
<style lang="scss" scoped>
.chat-panel {
    /* 聊天面板flex布局，让会话列表和聊天记录左右展示 */
    display: flex;

    .session-panel {
        background-color: #82c1ff;
        width: 20%;
        height: 100vh;
        padding: 20px;

        //border-right: 1px solid rgba(black, 0.07);
        .container {
            display: flex;
            flex-direction: column;
        }

        .top-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .bottom-section {
            display: flex;
            align-items: center;
        }


    }

    .question {
        text-align: right;
    }

    .answer {
        text-align: left;
    }

    .el-card {
        border-radius: 20px;
    }

    .message-panel {
        display: flex;
        width: 80%;
        height: 100vh;

        .dialog-container {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .dialog-content {
            width: 100%;
            height: 90%;
            //flex: 1;
            overflow-y: auto;
            /* 当内容超出高度时显示滚动条 */
        }
    }
}
</style>